<template>
  <!-- 新增施工单位管理 -->
  <div>
    <div class="bread-box but20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">施工单位管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="top-btn-group">
        <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
        <el-button size="mini" @click="handleBack">取消</el-button>
      </div>
    </div>
    <div>
      <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="170px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="施工单位编码:" size="mini" prop="unitCode">
              <el-input v-model="formData.unitCode" maxlength="8" placeholder="请输入施工单位编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="施工单位名称:" prop="unitName">
              <el-input v-model="formData.unitName" placeholder="请输入施工单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约时间:" prop="signUpTime">
              <el-date-picker
                v-model="formData.signUpTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人:" size="mini" prop="principal">
              <el-input v-model="formData.principal" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人电话:" size="mini" prop="principalPhone">
              <el-input v-model="formData.principalPhone" placeholder="请输入负责人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="QQ:" size="mini" prop="unitQq">
              <el-input v-model="formData.unitQq" placeholder="请输入QQ" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地址:" size="mini" prop="address">
              <el-input v-model="formData.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编:" size="mini" prop="postcode">
              <el-input v-model="formData.postcode" placeholder="请输入邮编" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同一时间最大承接面积:" size="mini" prop="sameTimeMaxArea">
              <el-input v-model.number="formData.sameTimeMaxArea" placeholder="请输入同一时间最大承接面积" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同一时间最大承接项目数量:" size="mini" prop="sameTimeMaxProject">
              <el-input v-model.number="formData.sameTimeMaxProject" placeholder="请输入同一时间最大承接项目数量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="质保金最低限额:" size="mini" prop="warrantyMinNorm">
              <el-input v-model.number="formData.warrantyMinNorm" placeholder="请输入质保金最低限额" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合作状态:" size="mini" prop="cooperationState">
              <el-select v-model="formData.cooperationState" placeholder="请选择" style="width:100%">
                <el-option v-for="item in cooperationStateList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" size="mini" prop="remark">
              <el-input v-model="formData.remark" placeholder="请输入特殊要求备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { submitUnitMng } from '@/api/constructionUnitMng'
export default {
  name: 'AddUnitMng',
  data() {
    return {
      cooperationStateList: [], // 合作状态
      formData: {},
      formRules: {
        unitCode: [
          { required: true, message: '请输入施工单位编码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]/, message: '只能输入字母和数字' }
        ],
        unitName: [
          { required: true, message: '请输入施工单位名称', trigger: 'blur' }
        ],
        signUpTime: [
          { required: true, message: '请选择签约时间' }
        ],
        principal: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        principalPhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        cooperationState: [
          { required: true, message: '请选择合作状态', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll(['COOPERATION_STATE'])
      .then(res => {
        this.cooperationStateList = res.COOPERATION_STATE // 合作状态
      })
  },
  activated() {},
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 保存
    handleSave() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          submitUnitMng(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.handleBack()
            }
          }).catch((res) => {
            this.$message.warning(res.msg)
          })
        }
      })
    },
    // 取消
    handleBack() {
      this.formData = {}
      this.$refs.refForm.clearValidate()
      this.$emit('goBack')
    }
  }
}
</script>

<style lang="scss" scoped>
.top-btn-group{
  text-align: right;
  margin-bottom: 20px;
}
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner,.btn-green{
    color: #3DC094;
}
</style>
